<template>
  <JVxeTable
    ref="tableRef"
    rowNumber
    keyboardEdit
    :class="prefixCls"
    :maxHeight="tableHeight.noToolbar"
    :loading="loading"
    :columns="columns"
    :dataSource="dataSource"
    :disabledRows="{ dbFieldName: ['id', 'has_child'] }"
    v-bind="tableProps"
  >
    <a-row :class="isCustomRegexp(props.value) ? 'row-valid-type' : 'row-valid-type full'">
      <a-col class="left">
        <a-select v-model:value="props.value" :options="validTypeOptions" style="width: 100%" @change="props.triggerChange">
          <template #dropdownRender="{ menuNode: menu }">
            <v-nodes :vnodes="menu" />
            <div v-if="isCustomRegexp(props.value)" class="custom-option-list rc-virtual-list-holder-inner" style="border-top: 1px solid #dfdfdf">
              正则表达式
              <div class="ant-select-item ant-select-item-option" @click="onAddCustomRegexp(props)">使用自定义正则表达式作为校验规则</div>
            </div>
          </template>
        </a-select>
      </a-col>
      <a-col class="right" title="修改自定义正则表达式">
        <a-button preIcon="ant-design:edit" @click="onChangeCustomRegexp(props)" />
      </a-col>
    </a-row>
  </JVxeTable>
</template>

<script lang="ts">
  import { defineComponent, ref, computed } from 'vue';
  import { JVxeTypes } from '/@/components/jeecg/JVxeTable/types';
  import { useTableSync } from '../../use/useTableSync';
  import { useJPrompt } from '/@/components/jeecg/JPrompt/hooks/useJPrompt';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useDesign } from '/@/hooks/web/useDesign';

  export default defineComponent({
    name: 'CheckDictTable',
    components: { VNodes: (_, { attrs }) => attrs.vnodes },
    setup() {
      const { prefixCls } = useDesign('cgform-check-dict-table');
      const { createMessage: $message } = useMessage();
      const columns = ref([
        { title: '字段名称', key: 'dbFieldName', width: 100 },
        { title: '字段备注', key: 'dbFieldTxt', width: 100 },
        {
          title: '字段Href',
          key: 'fieldHref',
          width: 130,
          type: JVxeTypes.input,
          defaultValue: '',
        },
        {
          title: '验证规则',
          key: 'fieldValidType',
          width: 170,
          type: JVxeTypes.slot,
          slotName: 'fieldValidType',
          allowInput: true,
          defaultValue: '',
          placeholder: '空',
        },
        {
          title: '校验必填',
          key: 'fieldMustInput',
          width: 80,
          type: JVxeTypes.checkbox,
          align: 'center',
          customValue: ['1', '0'],
          defaultChecked: false,
        },
        {
          title: '字典Table',
          key: 'dictTable',
          width: 280,
          type: JVxeTypes.textarea,
          defaultValue: '',
        },
        {
          title: '字典Code',
          key: 'dictField',
          width: 280,
          type: JVxeTypes.input,
          defaultValue: '',
        },
        {
          title: '字典Text',
          key: 'dictText',
          width: 280,
          type: JVxeTypes.input,
          defaultValue: '',
        },
      ]);
      const setup = useTableSync(columns);
      const validTypeOptions = ref([
        { label: '空', value: '' },
        { label: '唯一校验', value: 'only' },
        { label: '6到16位数字', value: 'n6-16' },
        { label: '6到18位字母', value: 's6-18' },
        { label: '6到16位任意字符', value: '*6-16' },
        { label: '网址', value: 'url' },
        { label: '电子邮件', value: 'e' },
        { label: '手机号码', value: 'm' },
        { label: '邮政编码', value: 'p' },
        { label: '字母', value: 's' },
        { label: '数字', value: 'n' },
        { label: '整数', value: 'z' },
        { label: '非空', value: '*' },
        { label: '金额', value: 'money' },
      ]);
      const validTypeValues = computed(() => {
        return validTypeOptions.value.map((opt) => opt.value);
      });
      const { createJPrompt } = useJPrompt();
      function isCustomRegexp(value) {
        return !validTypeValues.value.includes(value);
      }
      function onAddCustomRegexp(props) {
        createJPrompt({
          title: '自定义正则表达式',
          placeholder: '请输入正则表达式',
          rules: [{ required: true, message: '正则表达式不能为空！' }, { validator: validatorCustomRegexp }],
          onOk: (value) => {
            props.triggerChange(value);
            $message.success('添加成功');
          },
        });
      }
      function onChangeCustomRegexp(props) {
        createJPrompt({
          title: '修改自定义正则表达式',
          defaultValue: props.value,
          placeholder: '请输入正则表达式',
          rules: [{ required: true, message: '正则表达式不能为空！' }, { validator: validatorCustomRegexp }],
          onOk: (value) => {
            props.triggerChange(value);
            if (value !== props.value) {
              $message.success('修改成功');
            }
          },
        });
      }
      function validatorCustomRegexp(_, value) {
        if (isCustomRegexp(value)) {
          return Promise.resolve();
        } else {
          return Promise.reject('当前校验已存在');
        }
      }
      return Object.assign({}, setup, {
        prefixCls,
        columns,
        isCustomRegexp,
        validTypeOptions,
        validTypeValues,
        onAddCustomRegexp,
        onChangeCustomRegexp,
      });
    },
  });
</script>
<style scoped>
  .row-valid-type .left:hover,
  .row-valid-type .right:hover {
    z-index: 3;
  }

  .row-valid-type.full .right {
    display: none;
  }

  .row-valid-type .left {
    flex: 1;
    z-index: 2;
    width: calc(100% - 33px);
  }

  .row-valid-type .left .ant-select .ant-select-selector {
    border-width: 0 !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .row-valid-type .left .ant-select .ant-select-arrow {
    display: none;
  }

  .row-valid-type .left .ant-select:not(.ant-select-open) .ant-select-selector {
    background-color: transparent !important;
  }

  .row-valid-type .left .ant-select:not(.ant-select-open) .ant-select-arrow {
    display: none;
  }

  .row-valid-type .right {
    width: 33px;
    z-index: 1;
  }

  .row-valid-type .right .ant-btn {
    padding: 4px 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: none;
    background-color: transparent;
    box-shadow: none !important;
  }
</style>
